//1. 引入 gulp
const gulp = require('gulp');
//引入 gulp-babel
const babel = require('gulp-babel');
//导入代码打包的工具包
const browserify = require('gulp-browserify');
const rename = require('gulp-rename');
//导入代码压缩的工具包
const uglify = require('gulp-uglify');
//导入 less 工具包
const less = require('gulp-less');
//导入自动添加前缀的工具包
const LessAutoprefix = require('less-plugin-autoprefix');
//实例化                                  浏览器
const autoprefix = new LessAutoprefix({ browsers: ['last 20 versions'] });
//导入 css 合并的插件
const concat = require('gulp-concat');
//导入 css 压缩的插件
const cssmin = require('gulp-cssmin');
//导入 html 压缩的插件
const htmlmin = require('gulp-htmlmin');
//导入模块
const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');

//2. 创建任务
gulp.task('abc', async () => {
    console.log('Hello Gulp');
});

//语法转换的任务
gulp.task('babel', () => {
    return gulp.src('./src/js/*.js')    //通配符
        .pipe(babel({ //进行语法转换
            presets: ['@babel/env']
        })).pipe(gulp.dest('./build/js')).pipe(livereload());//输出到指定目录
});

//创建打包任务
gulp.task('browserify', function() {
    return gulp.src('./build/js/app.js')
      .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
      .pipe(rename('built.js'))			//为了防止冲突将文件重命名
      .pipe(gulp.dest('build/js')).pipe(livereload());		//输出到指定位置
  });

//创建代码压缩任务
gulp.task('uglify', function () {
    return gulp.src('build/js/built.js')
      .pipe(uglify())  //压缩js
      .pipe(rename('bundle.js'))
      .pipe(gulp.dest('dist/js')).pipe(livereload());
  });

//串行执行多个任务
gulp.task('default', gulp.series('babel', 'browserify', 'uglify'));

// less 编译任务
gulp.task('less', function () {
    return gulp.src('./src/less/*.less')
      .pipe(less({
        plugins: [autoprefix]//自动扩展前缀
      }))
      .pipe(gulp.dest('./build/css')).pipe(livereload());;
  });

//css 的合并任务
gulp.task('concat', function () {
  return gulp.src('./build/css/*.css')
      .pipe(concat('built.css'))
      .pipe(gulp.dest('./build/css/concat')).pipe(livereload());;
});

//css 压缩任务
gulp.task('cssmin', function () {
  return gulp.src('build/css/concat/built.css')
      .pipe(cssmin())
      .pipe(rename('app.css'))
      .pipe(gulp.dest('dist/css')).pipe(livereload());;
});

//html 压缩的任务
gulp.task('htmlmin', () => {
  return gulp.src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true ,//去除空格
      removeComments:true //去除注释
    }))
    .pipe(gulp.dest('dist')).pipe(livereload());;
});

gulp.task('watch', function () {
  //2. 启动热加载服务
  livereload.listen();
  //3. 通过自己服务器打开项目，自动刷新
  connect.server({
      root: 'dist', //设置网站根目录, 网站的静态资源文件夹
      port: 3000,   // 服务的端口
      livereload: true  //自动刷新
  });
  //3. 自动打开浏览器  localhost 指向本机的域名
  opn('http://localhost:3000/index.html');
  //4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
  gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
  gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
  gulp.watch('./src/index.html', gulp.series('htmlmin'));
});